<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物成功页面</title>
		<script type="text/javascript" src="static/js/jquery-1.12.4.min.js" ></script>
		
<script type="text/javascript">
			var jiaArr=["选择省","安徽","辽宁","黑龙江","江苏","浙江","河北"];
			var exampleArr = [
			       ["选择市"],
			       ["合肥","宣城","马鞍山","宿州","六安","安庆"],
			       ["沈阳","锦州","葫芦岛","朝阳","盘锦"],
			       ["哈尔滨","佳木斯","编","不","下","去"],
			       ["南京","徐州","也","编","不","下"],
			        ["杭州","苏州","也","编","不","下"],
			         ["石家庄","真","的","编","不","下"],
			];
			window.onload = function(){
				
				var selJia =document.getElementById("jia");
				//申请空间
				selJia.length = jiaArr.length;
				//添加元素
				for (var i = 0; i < jiaArr.length; i++){
					selJia.options[i].text=jiaArr[i];
					
				}
			}
			function ChangeExampleSelect(index)
			{
				var selExa = document.getElementById("example");
				
				selExa.length = exampleArr[index].length;
				
				for (var i = 0;i<exampleArr[index].length;i++) 
				{
				    selExa.options[i].text=exampleArr[index][i];
				    selExa.options[i].value=exampleArr[index][i];
					
					
				}
			}
</script>

	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/layui/layui.all.js"></script>

<style type="text/css">
			.header{
				position: absolute;
				width: 100%;
				height: 60px;
				margin: 0;
				padding: 0;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
				
			}
			.topic{
				position: absolute;
				left: 159.6px;
				float: none;
				width: 1200px;
				height: 60px;
			}
			.Logo{
				float: left;
				width: 146px;
				height: 60px;
				margin: 0;
				padding: 0;
				
			}
			.content-logo{
				padding-top:10px ;
			     list-style-type: none;
				text-align: center;
				width: 126px;
				height: 19.2px;
				
			}
			
			.top{
				
			    padding-left: 120px;
				float:left ;
				width: 722.717px;
				height: 60px;
				text-align: center;
			}
			.nav{
				width: 100%;
				height: 60px;
				margin: 0;
				padding: 0;
				
			}
			.content{
				float: left;
				font-family: "黑体";
				font-weight: bolder;
				width: 90px;
				height: 40px;
				list-style-type: none;
				margin-top: 20px;
				position: relative;
				
			}
			.content a{
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
			}
			.content a:hover{
				color: gainsboro;
			}
			.right-button{
				float: right;
				width: 42px;
				height: 60px;
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
				position: relative;
			}
			.content-button{
				position: relative;
				margin-top: 10px;
				width: 100%;
				height: 40px;
				 list-style-type: none;
			}
			
			.content-button {
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
			}
			.content-button img:hover{
				color: gainsboro;
			}
			.nav-last-one{
				float: left;
				display: none;
				position: absolute;
				z-index: 201;
				margin-left: -80px;
				width: 200px;
				height: 350px;
			
				list-style-type: none;
			   background-color: white;
			}
			.right-button:hover .nav-last-one{
				display: block;
				
			}
			.nav-last-one a{
				font: "微软雅黑";
				font-size: 20px;
				cursor: pointer;
			}
			.nav-last1 {
				
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last2{
				
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last3 {
			
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last4 {
		
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			.nav-last5 {
		
				width: 214.24.8px;
				height: 40px;
				margin-bottom: 20px;
				margin-top: 20px;
				border-bottom-style: solid;
				border-bottom-color:#DCDCDC;
				border-bottom-width: 2px;
			}
			
			.nav-last1 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last2 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last3 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last4 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.nav-last5 img{
				float: left;
				width: 22.6333px;
				height: 24.8px;
			}
			.content1{
				float: left;
				font-family: "黑体";
				font-weight: bolder;
				width: 90px;
				height: 40px;
				list-style-type: none;
				margin-top: 20px;
				position: relative;
				
			}
			.content1 a{
				display: block;
				color: black;
			    text-align: center;
				text-decoration: none;
			}
			.content1 a:hover{
				color: gainsboro;
			}
			.hide-second-nav{
				float: left;
				display: none;
				position: absolute;
				z-index: 200;
				margin-left: -420px;
				width: 1470px;
				height: 465px;
				margin-top: 21.5px;
				list-style-type: none;
			    background-color: #E3E3E3;
			}
			.content1:hover .hide-second-nav{
				display: block;
				
			}
			.hide-photo-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 159.6px;
				float: left;
				width: 464px;
				height: 354.6px;
				z-index: 0;
			}
			.hide-photo-1-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 159.6px;
				float: left;
				width: 464px;
				height: 354.6px;
				z-index: 1;
			}
			.hide-photo-2 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 633.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-2-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 633.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-3 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 633.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-3-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 633.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-4 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 815.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-4-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 815.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-5 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 815.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-5-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 815.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-6 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 997.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-6-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 997.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-7 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 997.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-7-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 997.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-8 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 1179.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-8-1 img{
				display: block;
				position: absolute;
				top:50px ;
				left: 1179.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.hide-photo-9 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 1179.6px;
				float: left;
				width:172px;
				height: 172px;
				z-index: 0;
			}
			.hide-photo-9-1 img{
				display: block;
				position: absolute;
				top:232px ;
				left: 1179.6px;
				float: left;
				width: 172px;
				height: 172px;
				z-index: 1;
			}
			.text2{
				float: left;
				width: 100%;
				height: 600px;
				position: absolute;
				top: 62px;
				background-color: #F8F8F8;
				
			}
			
			.text2-No1{
				float: left;
                width: 1200px;
                height:500px;
                position: absolute;
                top: 50px;
                left:159.6px;		
                background-color: white;	
			}
			.text2-No1-top{
				text-align: center;
				
				
			}
			.name{
				width: 226px;
				height: 44px;
				margin-left: 483px;
				
				font-family: "微软雅黑";
				font-size: large;
				text-align: center;
				border-style: solid;
				border-width: 1px;
				border-color: #DDDDDD;
				list-style-type: none;
			}
			#nametip{
				position: absolute;
				top: 106.4px;
				left: 550px;
				display:none;
				color:red;
				}
		
			.name:focus{
				border-color:black ;
			}
			
			.phone_number{
				width: 226px;
				height: 44px;
				font-family: "微软雅黑";
				font-size: large;
				position: absolute;
				top: 127.2px;
			    left: 483px;
			    text-align: center;
				border-style: solid;
				border-width: 1px;
				border-color: #DDDDDD;
				list-style-type: none;
			}
			.phone_number:focus{
				border-color: black;
			}
			#phone_numbertip{
				position: absolute;
				top: 175px;
				left: 550px;
				display:none;
				color:red;
				}
			
			.choose-adress{
				 float: left;
				width: 226px;
				height: 44px;
				color: black;
				position: absolute;
				top: 200px;
				left: 370px;
			    
		
		
				font-family: "微软雅黑";
				font-size: large;
			
				border-style: solid;
				border-width: 1px;
				border-color: #DDDDDD;
				list-style-type: none;
			}
		
			
			.city{
				float: left;
				color: #000000;
				width: 226px;
				height: 44px;
				position: absolute;
				top: 200px;
				left: 626px;
				
				font-family: "微软雅黑";
				font-size: large;
				
				border-style: solid;
				border-width: 1px;
				border-color: #DDDDDD;
				list-style-type: none;
			}
		
			.city:focus{
				border-color:black ;
			}
			.adress{
				width: 479px;
				height: 44px;
				position: absolute;
				top: 264px;
				left:370px ;
				text-align: center;
				font-family: "微软雅黑";
				font-size: large;
				
				border-style: solid;
				border-width: 1px;
				border-color: #DDDDDD;
				list-style-type: none;
			}
			.adress:focus{
				border-color:black ;
			}
			#adresstip{
				position: absolute;
				top:315px;
				left:570px ;
				display:none;
				color:red;
			}
			
			 
			
			
		   
			.over{
		
				position: absolute;
				top:400px ;
				left:500px ;
				width: 196px;
				height: 60px;
				font-family: "微软雅黑";
				font-size: large;
				text-align: center;
				
				border-style: solid;
				border-width: 1px;
				border-color: white;
				cursor: pointer;
				list-style-type: none;
				background-color:#009966;
			
			}
			
				
		         
			     
			}
			.over:hover{
				background-color:#006042;
			}
			.foot{
			    float: left;
				width: 100%;
				height: 437.4px;
				background-color: white;
				position: absolute;
				top:1000px ;
			}
			.foot-top{
				position: absolute;
				left: 159.6px;
				margin-top: 50px;
				
				width: 1200px;
				height: 195.6px;
			}
			.foot-left{
				float: left;
				width: 744px;
				height: 195.6px;
				
			}
			.foot-right{
				float: right;
				width: 173px;
				height: 116.2px;
				
			}
			.foot-left-1{
				float: left;
				width: 185.267px;
				height: 195.6px;
				margin: 0;
				padding: 0;
				
			}
			.foot-left-top-content{
				
				list-style-type: none;
				width: 185.267px;
				height: 14px;
				margin-bottom:10px;
			}
			.foot-left-top-content a{
				text-decoration: none;
				font-weight: bolder;
				color: black;
			}
			
			
			.foot-left-content{
				
				list-style-type: none;
				width: 171.267px;
				height: 28.6px;
			}
			
			
			.foot-left-content a{
				text-decoration: none;
				color: black;
			}
			.foot-left-content a:hover{
				color: gainsboro;
			}
			.foot-left-2{
				float: left;
				width: 185.283px;
				height: 195.6px;
				margin: 0;
				padding: 0;
			}
			.foot-left-3{
				float: left;
				width: 185.283px;
				height: 195.6px;
				margin: 0;
				padding: 0;
			}
			.foot-left-4{
				float: left;
				width: 185.283px;
				height: 195.6px;
				margin: 0;
				padding: 0;
			}
			.foot-right-one{
				width: 100%;
				height: auto;
			}
			.foot-right-top-content{
				list-style-type: none;
				width: 173px;
				height: 24px;
			}
			.foot-right-top-content a{
				text-decoration: none;
				color: black;
				font-weight: bolder;
			}
			
			.foot-right-content{
				list-style-type: none;
				width: 173px;
				height: 19.2px;
			}
			.foot-right-content a{
				text-decoration: none;
				color: black;
				
			}
			
			.foot-last{
				position: absolute;
				left: 159.6px;
				margin-top: 350px;
				width: 1200px;
				height: 100px;
				border-top-style: solid;
				border-top-color:#DCDCDC;
				border-top-width: 2px;
			}
			.foot-last p{
				width: 100%;
				height: auto;
				
			}
</style>
		
	</head>
	<body>
		
		<!--
        	作者：2454844235@qq.com
        	时间：2018-09-26
        	描述：导航栏以及二级菜单以及下拉列表
        -->
		<div class="header">
			
			<div class="topic">
				
			    <div class="Logo">
				        <li class="content-logo"><a  href="#"><img src="static/img/oppo-Logo.png"></a></li>
			    </div>
			    
			    <div class="top">
			        <ul class="nav">
				
				        <li class="content1"><a href="#">手机</a>
				        	<ul class="hide-second-nav">
				        		<li  class="hide-photo-1"><img src="static/img/hide1.jpg" href="#"></li>
				        		<li class="hide-photo-1-1"><img src="static/img/hide1-1.png" href="#"></li>
				        		<li class="hide-photo-2"><img src="static/img/hide2.jpg" href="#"></li>
				        		<li class="hide-photo-2-1"><img src="static/img/hide2-1.png" href="#"></li>
				        		<li class="hide-photo-3"><img src="static/img/hide3.jpg" href="#"></li>
				        		<li class="hide-photo-3-1"><img src="static/img/hide3-1.png" href="#"></li>
				        		<li class="hide-photo-4"><img src="static/img/hide4.jpg" href="#"></li>
				        		<li class="hide-photo-4-1"><img src="static/img/hide4-1.png" href="#"></li>
				        		<li class="hide-photo-5"><img src="static/img/hide5.png" href="#"></li>
				        		<li class="hide-photo-5-1"><img src="static/img/hide5-1.jpg" href="#"></li>
				        		<li class="hide-photo-6"><img src="static/img/hide6.jpg" href="#"></li>
				        		<li class="hide-photo-6-1"><img src="static/img/hide6-1.png" href="#"></li>
				        		<li class="hide-photo-7"><img src="static/img/hide7.png" href="#"></li>
				        		<li class="hide-photo-7-1"><img src="static/img/hide7-1.png" href="#"></li>
				        		<li class="hide-photo-8"><img src="static/img/hide8.jpg" href="#"></li>
				        		<li class="hide-photo-8-1"><img src="static/img/hide8-1.png" href="#"></li>
				        		<li class="hide-photo-9"><img src="static/img/hide9.jpg" href="#"></li>
				        		<li class="hide-photo-9-1"><img src="static/img/hide9-1.png" href="#"></li>
				        		
				        	</ul>
				        </li>
				        <li class="content"><a href="#">品牌</a></li>
				        <li class="content"><a href="#">商城</a></li>
				        <li class="content"><a href="#">体验店</a></li>
				        <li class="content"><a href="#">服务</a></li>
				        <li class="content"><a href="#">社区</a></li>
				        <li class="content"><a href="#">ColorOS</a></li>
				        <li class="content"><a href="#">云服务</a></li>
				    
			        </ul>
			    </div>
			    
			    <div class="right-button">
			    	<li class="content-button"><a href="#"><img src="static/img/buttun.png" ></a>
			    		<ul class="nav-last-one">
			    			<li class="nav-last1"><img src="static/img/nav-last1.png"><a>购物车</a></li>
			    			<li class="nav-last2"><img src="static/img/nav-last2.png"><a>我的订单</a></li>
			    			<li class="nav-last3"><img src="static/img/nav-last3.jpg"><a>回收单</a></li>
			    			<li class="nav-last4"><img src="static/img/nav-last-4.jpg"><a>个人中心</a></li>
			    			<li class="nav-last5"><img src="static/img/nav-last-5.png"><a>登录</a></li>
			    		</ul>
			    	</li>
			    </div>
			    
			</div>
			
		</div>
		<!--
        	作者：2454844235@qq.com
        	时间：2018-09-26
        	描述：第二部分
        -->
        <div class="text2">
        
        	<div class="text2-No1">
        	       <p   class="text2-No1-top">添加新地址</p>
        			<form id="adressInfo" action ="">
        					
        					<input type="text" name="name" id="name" placeholder="姓名" class="name" />    
        					<!--验证姓名不能为空-->
        					<div   id="nametip">请输入姓名</div>
        					
        					
        					<input type="text" name="phone_number" id="phone_number" placeholder="电话" class="phone_number" />   
        					<!--验证电话不能为空-->
        					<div id="phone_numbertip">请输入电话</div>
        					
        					
        					
        					<select name="jia" id="jia" class="choose-adress" onchange="ChangeExampleSelect(this.selectedIndex)">
        					</select>
        					<select name="example" id="example" class="city">
        					</select>
        					
        					<input type="text" name="adress" id="adress" placeholder="详细地址" class="adress" />  
        					<!--验证地址不能为空-->
        					<div   id="adresstip">请输入地址</div>
        					
        			            
        			        <input class="over" value="去付款" style="color: white;" type="submit"/>
        			             
        				</form>
        	</div>
       
        	
        </div>
    <div class="foot">
			<div class="foot-top">
				<div class="foot-left">
					<ul class="foot-left-1">
						<li class="foot-left-top-content"><a href="#">推荐机型</a></li>
						<li class="foot-left-content"><a href="#">R17</a></li>
						<li class="foot-left-content"><a href="#">Find X</a></li>
						<li class="foot-left-content"><a href="#">A7x</a></li>
						<li class="foot-left-content"><a href="#">A5</a></li>
						<li class="foot-left-content"><a href="#">A3</a></li>
						<li class="foot-left-content"><a href="#">A1</a></li>
					</ul>
					
					<ul class="foot-left-2">
						<li class="foot-left-top-content"><a href="#">服务</a></li>
						<li class="foot-left-content"><a href="#">以旧换新</a></li>
						<li class="foot-left-content"><a href="#">服务网点查询</a></li>
						<li class="foot-left-content"><a href="#">零配件价格查询</a></li>
						<li class="foot-left-content"><a href="#">官网授权网点</a></li>
						<li class="foot-left-content"><a href="#">预置软件公示</a></li>
					</ul>
					
					<ul class="foot-left-3">
						<li class="foot-left-top-content"><a href="#">关于我们</a></li>
						<li class="foot-left-content"><a href="#">关于 OPPO</a></li>
						<li class="foot-left-content"><a href="#">新闻资讯</a></li>
						<li class="foot-left-content"><a href="#">媒体网络</a></li>
						<li class="foot-left-content"><a href="#">加入我们</a></li>
						<li class="foot-left-content"><a href="#">反馈安全问题</a></li>
					</ul>
					
					<ul class="foot-left-4">
						<li class="foot-left-top-content"><a href="#">商务合作</a></li>
						<li class="foot-left-top-content"><a href="#">平台相关</a></li>
						<li class="foot-left-top-content"><a href="#">采购相关</a></li>
						
					</ul>
				</div>
				
				<div class="foot-right">
					<ul class="foot-right-one">
						<li class="foot-right-top-content"><a href="#">4001-666-888</a></li>
						<li class="foot-right-content"><a href="#">24小时全国热线</a></li>
					</ul>
				</div>
			</div>
			
			<div class="foot-last">
				<p> 2005 - 2018 OPPO 版权所有 粤ICP备08130115号-1 联系方式：4001-666-888</p>
			</div>
		</div>   
		
			<script type="text/javascript">
			
			$(".over").click(function(){
				if($("#name").val()==""){
					
				 	$("#nametip").css("display","block");
				 	return false;
				}else{
					if($("#phone_number").val()==""){
						$("#phone_numbertip").css("display","block");
					 	return false;
					}else{
					    if($("#adress").val()==""){
						     $("#adresstip").css("display","block");
					 	     return false;
					    }
					}
				}
		});
			$("#name").focus(function(){
			   	$("#nametip").css("display","none");
		    });
		    $("#phone_number").focus(function(){
			   	 $("#phone_numbertip").css("display","none");
		    });
		    $("#adress").focus(function(){
			   	 $("#adresstip").css("display","none");
		    });
		</script>
	</body>
</html>

